<template>
    <div>
        <el-table 
            v-bind="$attrs"
            @selection-change="handleSelectionChange" 
            @row-click="rowClick" 
            >
            <el-table-column
                v-if="columns.index" 
                type="index" 
                align="center" 
                width="55"/>
            <el-table-column
                v-if="columns.selection" 
                type="selection" 
                align="center" 
                width="55"/>
            <el-table-column
                v-for="(tr, index) in columns.tr" 
                :key="index" 
                :prop="tr.prop"
                :label="tr.label"
                :width="tr.width || ''" 
                :align="tr.align || 'center'"
                :show-overflow-tooltip="true" 
                
                >
                <template 
                    slot-scope="scope" 
                    >
                    <section v-if="tr.el === 'button'">
                        <el-button
                            v-for="(btn, btnIndex) in tr.btns" 
                            :key="btnIndex" 
                            :type="btn.type || 'primary'" 
                            :plain="btn.plain || false" 
                            :round="btn.round || false" 
                            :circle="btn.circle || false" 
                            :disabled="btn.disabled || false" 
                            :icon="btn.icon" 
                            @click="btn.func(scope.row)"
                            >
                            {{btn.text}}
                        </el-button>
                    </section>
                    <section v-if="tr.el === 'tag'">
                        <el-tag
                            v-for="(tag, tagIndex) in tr.tags" 
                            :key="tagIndex"
                            :type="tag.format[scope.row[tag.key]].type"
                            >
                            {{tag.format[scope.row[tag.key]].value}}
                        </el-tag>
                    </section>
                    <section v-if="tr.el === 'switch'">
                        <el-switch 
                            v-model="scope.row[tr.switch.key]" 
                            :active-color="tr.switch.activeColor || '#13ce66'" 
                            :inactive-color="tr.switch.inactiveColor || '#C0C4CC'" 
                            @change="tr.switch.func(scope.row,$event)"
                            />
                    </section>
                    <section v-if="tr.el === 'link'">
                        <el-button
                            :type="tr.link.type || 'primary'" 
                            :plain="tr.link.plain || false" 
                            :disabled="tr.link.disabled || false" 
                            @click="tr.link.func(scope.row)"
                            >
                            {{scope.row[tr.link.key]}}
                        </el-button>
                    </section>
                    <section v-if="tr.el === 'icon'">
                        <i 
                        :class="tr.icon.class" 
                        v-show="scope.row[tr.icon.key] == tr.icon.condition"
                        :style="tr.icon.style"
                        />
                    </section>
                    <section v-else>
                        {{scope.row[tr.prop]}}
                    </section>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: 'iv-table',
    props: {
        columns: {
            type: Object,
            default: () => {}
        },
    },
    methods: {
        handleSelectionChange(val) {
            this.$emit("selection-change", val);
        },
        rowClick(Row, Event, Column){
            const data = {
                row: Row,
                event: Event,
                column: Column
            };
            this.$emit("row-click", data);
        }
    }
}
</script>
